সিএসএস গ্রিড ম্যাসনরি: পিন্টারেস্ট-স্টাইল লেআউট বাস্তবায়নের একটি গভীর বিশ্লেষণ

বহু বছর ধরে, পিন্টারেস্ট দ্বারা জনপ্রিয় 'ম্যাসনরি' লেআউট আধুনিক ওয়েব ডিজাইনের একটি প্রধান অংশ হয়ে দাঁড়িয়েছে। এর সিগনেচার 'ওয়াটারফল' এফেক্ট, যেখানে বিভিন্ন উচ্চতার আইটেমগুলো একটি দেয়ালের ইটের মতো সুন্দরভাবে একসাথে ফিট করে, তা দেখতে যেমন নান্দনিক, তেমনই কন্টেন্ট প্রদর্শনের জন্য অত্যন্ত কার্যকর। যাইহোক, এই আপাতদৃষ্টিতে সহজ লেআউটটিকে একটি শক্তিশালী, রেসপন্সিভ এবং পারফরম্যান্ট উপায়ে অর্জন করা ঐতিহাসিকভাবে ফ্রন্ট-এন্ড ডেভেলপারদের জন্য একটি বড় চ্যালেঞ্জ ছিল, যার জন্য প্রায়শই জাভাস্ক্রিপ্ট লাইব্রেরির উপর ব্যাপকভাবে নির্ভর করতে হতো।

সিএসএস গ্রিডের আবির্ভাব ওয়েব লেআউট সম্পর্কে আমাদের চিন্তাভাবনায় বিপ্লব এনেছে, কিন্তু একটি সত্যিকারের, নেটিভ ম্যাসনরি সমাধান হাতের নাগালের বাইরেই ছিল। অর্থাৎ, এখন পর্যন্ত। সিএসএস গ্রিড লেআউট মডিউল লেভেল ৩ স্পেসিফিকেশনে grid-template-rows: masonry এর প্রবর্তনের সাথে সাথে, খেলার নিয়ম বদলে যাচ্ছে। এই নিবন্ধটি ডেভেলপারদের একটি বিশ্বব্যাপী দর্শকদের জন্য একটি বিশদ নির্দেশিকা হিসাবে কাজ করবে, যা আপনাকে ম্যাসনরি লেআউটের বিবর্তনের মধ্য দিয়ে নিয়ে যাবে, ক্লাসিক ওয়ার্কঅ্যারাউন্ড থেকে শুরু করে অত্যাধুনিক নেটিভ সিএসএস বাস্তবায়ন পর্যন্ত, এবং প্রগ্রেসিভ এনহ্যান্সমেন্ট ব্যবহার করে একটি বাস্তবসম্মত, প্রোডাকশন-রেডি কৌশল প্রদান করবে।

ম্যাসনরি লেআউট আসলে কী?

কোডে যাওয়ার আগে, আসুন একটি স্পষ্ট, সাধারণ ধারণা তৈরি করি। একটি ম্যাসনরি লেআউট হলো এমন একটি গ্রিড সিস্টেম যেখানে আইটেমগুলো উল্লম্বভাবে সাজানো হয়, পূর্ববর্তী সারির ছোট আইটেমগুলোর দ্বারা সৃষ্ট ফাঁক পূরণ করে। একটি কঠোর গ্রিডের মতো নয় যেখানে একটি সারির সমস্ত আইটেমকে অনুভূমিকভাবে সারিবদ্ধ হতে হয়, ম্যাসনরি উল্লম্ব স্থানের সর্বোত্তম ব্যবহার করে। এর ফলে একটি কম্প্যাক্ট, ফাঁক-মুক্ত বিন্যাস তৈরি হয় যা বেমানান সাদা স্থান প্রতিরোধ করে এবং একটি ডাইনামিক ভিজ্যুয়াল ফ্লো তৈরি করে।

এর মূল বৈশিষ্ট্যগুলো হলো:

• আইটেমগুলোর কলামের প্রস্থ নির্দিষ্ট কিন্তু উচ্চতা পরিবর্তনশীল।
• আইটেমগুলো উল্লম্ব কলামে সাজানো থাকে।
• সারির কোনো নির্দিষ্ট উচ্চতা নেই; আইটেমগুলো উপলব্ধ স্থান পূরণের জন্য প্রবাহিত হয়।
• কন্টেইনারের সামগ্রিক উচ্চতা ন্যূনতম রাখা হয়।

এই লেআউটটি ইমেজ গ্যালারি, পোর্টফোলিও, সোশ্যাল মিডিয়া ফিড এবং যেকোনো কন্টেন্ট-হেভি ড্যাশবোর্ডের জন্য আদর্শ যেখানে আইটেমগুলোর উল্লম্ব মাত্রা অনিশ্চিত।

ঐতিহাসিক পদ্ধতি: মাল্টি-কলাম লেআউট ("হ্যাক")

অনেক দিন ধরে, একটি পিওর সিএসএস ম্যাসনরি লেআউটের সবচেয়ে কাছাকাছি যা আমরা যেতে পারতাম তা হলো সিএসএস মাল্টি-কলাম লেআউট মডিউল ব্যবহার করে। এই কৌশলে column-count এবং column-gap এর মতো প্রোপার্টি ব্যবহার করা হয়।

এটি কীভাবে কাজ করে

মাল্টি-কলাম পদ্ধতিটি আপনার আইটেমগুলোর কন্টেইনারকে এমনভাবে বিবেচনা করে যেন এটি একটি একক টেক্সট ব্লক এবং তারপর এটিকে কয়েকটি কলামে বিভক্ত করে।

উদাহরণস্বরূপ HTML কাঠামো:

            <div class="multicolumn-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- more items -->
</div>
            

              
                Copy
              
            
          

উদাহরণস্বরূপ CSS:

            .multicolumn-container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block; /* Or block, depending on context */
  width: 100%;
  margin-bottom: 1em;
  break-inside: avoid; /* Prevents items from breaking across columns */
}
            

              
                Copy
              
            
          

সুবিধা এবং অসুবিধা

সুবিধা:

• সরলতা: মাত্র কয়েকটি লাইনের সিএসএস দিয়ে এটি বাস্তবায়ন করা অবিশ্বাস্যভাবে সহজ।
• চমৎকার ব্রাউজার সাপোর্ট: মাল্টি-কলাম মডিউলটি সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত, যা এটিকে একটি নির্ভরযোগ্য বিকল্প করে তোলে।

অসুবিধা:

• আইটেম ক্রম: এটি সবচেয়ে বড় অসুবিধা। কন্টেন্ট প্রথম কলামের উপর থেকে নীচে প্রবাহিত হয়, তারপর দ্বিতীয় কলামের উপর থেকে শুরু হয়। এর মানে হলো আপনার আইটেমগুলো উল্লম্বভাবে সাজানো হয়, অনুভূমিকভাবে নয়। আইটেম ১ কলাম ১-এ থাকতে পারে, আইটেম ২ তার নীচে, যখন আইটেম ৪ কলাম ২-এর শীর্ষে থাকবে। কালানুক্রমিক ফিড বা র‍্যাঙ্ক করা কন্টেন্টের জন্য এটি প্রায়শই কাঙ্ক্ষিত ব্যবহারকারীর অভিজ্ঞতা নয়।
• কন্টেন্ট বিভাজন: break-inside: avoid; প্রোপার্টিটি অত্যন্ত গুরুত্বপূর্ণ কিন্তু সবসময় নির্ভুল নয়। কিছু জটিল পরিস্থিতিতে, একটি আইটেমের কন্টেন্ট দুটি কলামে বিভক্ত হয়ে যেতে পারে, যা অত্যন্ত অনাকাঙ্ক্ষিত।
• সীমিত নিয়ন্ত্রণ: এটি স্বতন্ত্র আইটেমগুলোর সুনির্দিষ্ট স্থান নির্ধারণের উপর খুব কম নিয়ন্ত্রণ দেয়, যা এটিকে আরও জটিল লেআউটের জন্য অনুপযুক্ত করে তোলে।

যদিও এটি একটি চতুর ওয়ার্কঅ্যারাউন্ড, মাল্টি-কলাম পদ্ধতিটি মৌলিকভাবে একটি সত্যিকারের গ্রিড সিস্টেম নয় এবং অনেক আধুনিক অ্যাপ্লিকেশনের জন্য এটি যথেষ্ট নয়।

সিএসএস গ্রিড যুগ: রো স্প্যানিং সহ "ছদ্ম" ম্যাসনরি

সিএসএস গ্রিডের আগমনের সাথে সাথে, ডেভেলপাররা অবিলম্বে ম্যাসনরি এফেক্টটি নকল করার চেষ্টা করেছিলেন। যদিও গ্রিড দ্বি-মাত্রিক লেআউটের জন্য দুর্দান্ত, এটির জন্য আইটেমগুলোকে সারি এবং কলামের একটি 예측যোগ্য গ্রিডে ফিট করতে হয়। একটি সত্যিকারের ম্যাসনরি এই নিয়মটি ভাঙে। যাইহোক, একটি চতুর কৌশল উদ্ভূত হয়েছে যা এই এফেক্টটি অনুকরণ করার জন্য সিএসএস গ্রিডের স্প্যানিং ক্ষমতা ব্যবহার করে।

এটি কীভাবে কাজ করে

এই পদ্ধতিতে অনেকগুলো ছোট, নির্দিষ্ট-উচ্চতার সারি সহ একটি স্ট্যান্ডার্ড গ্রিড সেট আপ করা জড়িত। তারপরে প্রতিটি গ্রিড আইটেমকে তার কন্টেন্টের উচ্চতার উপর ভিত্তি করে নির্দিষ্ট সংখ্যক সারি স্প্যান করার নির্দেশ দেওয়া হয়। প্রতিটি আইটেমের জন্য প্রয়োজনীয় স্প্যান গণনা করার জন্য এটির জন্য কিছুটা জাভাস্ক্রিপ্ট প্রয়োজন।

উদাহরণস্বরূপ CSS:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 20px; /* Define a small, fixed row height */
}

.item {
  /* JavaScript will add 'grid-row-end' here */
}
            

              
                Copy
              
            
          

উদাহরণস্বরূপ জাভাস্ক্রিপ্ট (ধারণাগত):

            const grid = document.querySelector('.grid-container');
const items = document.querySelectorAll('.item');
const rowHeight = 20; // Must match grid-auto-rows in CSS
const rowGap = 16; // 1em, assuming 16px base font size

items.forEach(item => {
  const contentHeight = item.querySelector('.content').offsetHeight;
  const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
});
            

              
                Copy
              
            
          

সুবিধা এবং অসুবিধা

সুবিধা:

• সঠিক আইটেম ক্রম: মাল্টি-কলামের মতো নয়, এখানে আইটেমগুলো সঠিক বাম-থেকে-ডান, উপর-থেকে-নীচ ক্রমে স্থাপন করা হয়।
• শক্তিশালী গ্রিড বৈশিষ্ট্য: আপনি সিএসএস গ্রিডের সমস্ত শক্তি ব্যবহার করতে পারেন, যার মধ্যে রয়েছে অ্যালাইনমেন্ট, গ্যাপ এবং minmax() সহ রেসপন্সিভ কলাম সংজ্ঞা।

অসুবিধা:

• জাভাস্ক্রিপ্ট নির্ভরতা: এটি একটি পিওর সিএসএস সমাধান নয়। কন্টেন্ট (বিশেষ করে ছবি) লোড হওয়ার পরে উচ্চতা পরিমাপ করতে এবং স্টাইল প্রয়োগ করার জন্য ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট চালানোর প্রয়োজন হয়। এটি প্রাথমিক পৃষ্ঠা লোড হওয়ার পরে কন্টেন্ট রিফ্লো বা লাফালাফি করতে পারে।
• পারফরম্যান্স ওভারহেড: এই গণনাগুলো চালানো, বিশেষ করে শত শত আইটেম সহ পৃষ্ঠাগুলোতে, পারফরম্যান্সকে প্রভাবিত করতে পারে। উইন্ডো রিসাইজ করার সময় এটি পুনরায় গণনা করার প্রয়োজন হয়।
• জটিলতা: এটি একটি সাধারণ সিএসএস প্রোপার্টির চেয়ে সেট আপ এবং রক্ষণাবেক্ষণ করা আরও জটিল।

এই সিএসএস গ্রিড + জাভাস্ক্রিপ্ট পদ্ধতিটি বেশ কয়েক বছর ধরে আধুনিক ম্যাসনরি লেআউটের জন্য ডি-ফ্যাক্টো স্ট্যান্ডার্ড হয়ে উঠেছিল, যা স্ক্রিপ্টিংয়ের উপর নির্ভরতা সত্ত্বেও নিয়ন্ত্রণ এবং চূড়ান্ত চেহারার সেরা ভারসাম্য প্রদান করে।

ভবিষ্যৎ এখন: `grid-template-rows` সহ নেটিভ সিএসএস ম্যাসনরি

অনেক ডেভেলপার যে মুহূর্তটির জন্য অপেক্ষা করছিলেন তা অবশেষে আসছে। সিএসএস ওয়ার্কিং গ্রুপ সরাসরি সিএসএস গ্রিড স্পেসিফিকেশনের মধ্যে ম্যাসনরি লেআউট অর্জনের জন্য একটি নেটিভ উপায় নির্দিষ্ট করেছে। এটি grid-template-rows বা grid-template-columns প্রোপার্টির জন্য masonry ভ্যালু ব্যবহার করে সম্পন্ন করা হয়।

`masonry` ভ্যালুটি বোঝা

যখন আপনি grid-template-rows: masonry; সেট করেন, তখন আপনি ব্রাউজারের রেন্ডারিং ইঞ্জিনকে আইটেম স্থাপনের জন্য একটি ভিন্ন অ্যালগরিদম গ্রহণ করতে বলছেন। একটি কঠোর গ্রিড সারি মেনে চলার পরিবর্তে, আইটেমগুলো সবচেয়ে বেশি উপলব্ধ স্থান সহ কলামে স্থাপন করা হয়, যা ম্যাসনরির সিগনেচার প্যাকড এফেক্ট তৈরি করে।

বর্তমান ব্রাউজার সাপোর্ট

গুরুত্বপূর্ণ দ্রষ্টব্য: এই লেখা পর্যন্ত, নেটিভ সিএসএস ম্যাসনরি একটি পরীক্ষামূলক বৈশিষ্ট্য। এর সাপোর্ট খুবই সীমিত। এটি একটি ভবিষ্যৎ-মুখী প্রযুক্তি।

• ফায়ারফক্স: সমর্থিত, কিন্তু একটি ফিচার ফ্ল্যাগের আড়ালে। এটি সক্রিয় করতে, আপনার ফায়ারফক্স ব্রাউজারে about:config এ যান এবং layout.css.grid-template-masonry-value.enabled কে true তে সেট করুন।
• সাফারি: পূর্বে সাফারি টেকনোলজি প্রিভিউতে উপলব্ধ ছিল কিন্তু স্পেসিফিকেশন আপডেটের অপেক্ষায় থাকার কারণে সরানো হয়েছে।
• ক্রোম/এজ: এখনও বাস্তবায়িত হয়নি।

সর্বশেষ সাপোর্ট তথ্যের জন্য CanIUse.com এর মতো রিসোর্সগুলো পরীক্ষা করা অত্যন্ত গুরুত্বপূর্ণ। যেহেতু সাপোর্ট ব্যাপক নয়, তাই একটি শক্ত ফলব্যাক কৌশল ছাড়া এই সমাধানটি প্রোডাকশনে ব্যবহার করা যাবে না।

নেটিভ সিএসএস ম্যাসনরি কীভাবে বাস্তবায়ন করবেন

বাস্তবায়নটি সুন্দরভাবে সহজ। এটাই এই ফিচারটিকে এত উত্তেজনাপূর্ণ করে তোলে।

উদাহরণস্বরূপ CSS:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1em; /* 'gap' is the modern shorthand for grid-gap */
  align-items: start; /* Ensures items start at the top of their track */
}
            

              
                Copy
              
            
          

এটুকুই। চলুন এই প্রোপার্টিগুলো ভেঙে দেখি:

• display: grid;: অপরিহার্য সূচনা বিন্দু।
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: এটি একটি ক্লাসিক রেসপন্সিভ গ্রিড সেটআপ। এটি ব্রাউজারকে যতগুলো কলাম ফিট করতে পারে ততগুলো তৈরি করতে বলে, যেখানে প্রতিটি কলামের সর্বনিম্ন প্রস্থ ২৫০ পিক্সেল এবং যেকোনো অতিরিক্ত স্থান পূরণের জন্য বৃদ্ধি পাবে।
• grid-template-rows: masonry;: এটি হলো ম্যাজিক প্রোপার্টি। এটি সারি লেআউট অ্যালগরিদমকে স্ট্যান্ডার্ড গ্রিড থেকে ম্যাসনরিতে পরিবর্তন করে।
• gap: 1em;: এটি সমস্ত গ্রিড আইটেমের মধ্যে অনুভূমিক এবং উল্লম্ব উভয় দিকেই ফাঁকা স্থান নির্ধারণ করে।
• align-items: start;: এটি আইটেমগুলোকে তাদের গ্রিড ট্র্যাকের শুরুতে সারিবদ্ধ করে। একটি উল্লম্ব ম্যাসনরি লেআউটের জন্য, এটি ডিফল্ট আচরণ, তবে সুস্পষ্ট হওয়া একটি ভালো অভ্যাস।

এই কোড দিয়ে, ব্রাউজার আইটেম স্থাপনের জন্য সমস্ত জটিল গণনা পরিচালনা করে। কোনো জাভাস্ক্রিপ্ট নেই, কোনো রিফ্লো নেই, শুধু বিশুদ্ধ, পারফরম্যান্ট সিএসএস।

একটি প্রোডাকশন-রেডি কৌশল: প্রগ্রেসিভ এনহ্যান্সমেন্ট

নেটিভ সিএসএস ম্যাসনরির জন্য বর্তমান সার্বজনীন ব্রাউজার সাপোর্টের অভাবের কারণে, আমরা কেবল এটি ব্যবহার করে সেরা ফলাফলের আশা করতে পারি না। আমাদের একটি পেশাদার কৌশল প্রয়োজন যা বেশিরভাগ ব্যবহারকারীর জন্য সেরা অভিজ্ঞতা প্রদান করে। উত্তরটি হলো প্রগ্রেসিভ এনহ্যান্সমেন্ট।

আমাদের কৌশলটি হবে:

1. যেসব ব্রাউজার এটি সমর্থন করে তাদের জন্য আধুনিক, নেটিভ সিএসএস ম্যাসনরি ব্যবহার করুন।
2. অন্যান্য সমস্ত ব্রাউজারের জন্য সিএসএস গ্রিড + জাভাস্ক্রিপ্ট স্প্যানিং কৌশল ব্যবহার করে একটি শক্তিশালী ফলব্যাক প্রদান করুন।

ধাপ ১: বেস সিএসএস (ফলব্যাক)

আমরা আমাদের জাভাস্ক্রিপ্ট-চালিত ফলব্যাকের জন্য সিএসএস লিখে শুরু করব। এটি সেই কোড যা সমস্ত ব্রাউজার প্রাথমিকভাবে পাবে।

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
  /* The small row height for our JS-based spanning calculation */
  grid-auto-rows: 10px;
}

.item {
  /* We add some basic styling for the items */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 1em;
  box-sizing: border-box;
}
            

              
                Copy
              
            
          

ধাপ ২: জাভাস্ক্রিপ্ট ফলব্যাক

এরপরে, আমরা ফলব্যাককে শক্তি দেওয়ার জন্য জাভাস্ক্রিপ্ট লিখব। এই স্ক্রিপ্টটি কেবল তখনই চলবে যদি নেটিভ সিএসএস সমাধান উপলব্ধ না থাকে।

            // Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Check if the browser supports 'grid-template-rows: masonry'
  const isMasonrySupported = CSS.supports('grid-template-rows', 'masonry');

  if (!isMasonrySupported) {
    console.log("Browser does not support native CSS Masonry. Applying JS fallback.");
    applyMasonryFallback();

    // Optional: Re-run on window resize
    window.addEventListener('resize', debounce(applyMasonryFallback, 150));
  }
});

function applyMasonryFallback() {
  const container = document.querySelector('.masonry-container');
  if (!container) return;

  // Get all direct children of the container
  const items = container.children;

  // Define grid properties (should match your CSS)
  const rowHeight = 10; 
  const rowGap = 16; // Assuming 1em = 16px

  for (let item of items) {
    item.style.gridRowEnd = 'auto'; // Reset previous spans
    const itemHeight = item.offsetHeight;
    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// Debounce function to limit how often a function can run
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}
            

              
                Copy
              
            
          

ধাপ ৩: `@supports` দিয়ে উন্নত করা

অবশেষে, আমরা সিএসএস @supports অ্যাট-রুল ব্যবহার করব। এটি একটি শক্তিশালী বৈশিষ্ট্য যা আমাদের সিএসএস নিয়মগুলো কেবল তখনই প্রয়োগ করতে দেয় যদি ব্রাউজার একটি নির্দিষ্ট সিএসএস প্রোপার্টি-ভ্যালু পেয়ার বোঝে। এটি আমাদের প্রগ্রেসিভ এনহ্যান্সমেন্টের মূল ভিত্তি।

আমরা এটি আমাদের স্টাইলশীটে যোগ করি:

            /* Apply these rules ONLY if the browser supports native Masonry */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    /* Override the fallback grid-auto-rows */
    grid-template-rows: masonry;
    grid-auto-rows: unset; /* Or 'auto', to be clean */
  }
}
            

              
                Copy
              
            
          

সবকিছু একসাথে কীভাবে কাজ করে

1. একটি আধুনিক ব্রাউজার (যেমন ফ্ল্যাগ সহ ফায়ারফক্স): ব্রাউজারটি সিএসএস পড়ে। এটি grid-template-rows: masonry বোঝে। @supports ব্লকটি প্রয়োগ করা হয়, যা grid-auto-rows কে ওভাররাইড করে এবং নেটিভ, পারফরম্যান্ট ম্যাসনরি লেআউট সক্ষম করে। আমাদের জাভাস্ক্রিপ্ট CSS.supports() পরীক্ষা করে, যা true রিটার্ন করে, তাই ফলব্যাক ফাংশনটি কখনও চলে না। ব্যবহারকারী সম্ভাব্য সেরা অভিজ্ঞতা পায়।
2. একটি স্ট্যান্ডার্ড ব্রাউজার (যেমন ক্রোম): ব্রাউজারটি সিএসএস পড়ে। এটি grid-template-rows: masonry বোঝে না, তাই এটি @supports ব্লকটিকে সম্পূর্ণরূপে উপেক্ষা করে। এটি grid-auto-rows: 10px সহ বেস সিএসএস প্রয়োগ করে। আমাদের জাভাস্ক্রিপ্ট CSS.supports() পরীক্ষা করে, যা false রিটার্ন করে। applyMasonryFallback() ফাংশনটি ট্রিগার হয়, যা রো স্প্যানগুলো গণনা করে এবং গ্রিড আইটেমগুলোতে প্রয়োগ করে। ব্যবহারকারী জাভাস্ক্রিপ্ট দ্বারা চালিত একটি সম্পূর্ণ কার্যকরী ম্যাসনরি লেআউট পায়।

এই পদ্ধতিটি শক্তিশালী, ভবিষ্যৎ-প্রমাণ, এবং প্রত্যেকের জন্য একটি দুর্দান্ত অভিজ্ঞতা প্রদান করে, তাদের ব্রাউজার প্রযুক্তি নির্বিশেষে। যত বেশি ব্রাউজার নেটিভ ম্যাসনরি গ্রহণ করবে, জাভাস্ক্রিপ্ট ফলব্যাকটি তত কম ব্যবহৃত হবে, কোডে কোনো পরিবর্তনের প্রয়োজন ছাড়াই।

উপসংহার: ভবিষ্যতের জন্য নির্মাণ

সিএসএস-এ একটি সহজ, ডিক্লারেটিভ ম্যাসনরি লেআউটের যাত্রা দীর্ঘ হয়েছে, কিন্তু আমরা একটি বড় অগ্রগতির দ্বারপ্রান্তে আছি। যদিও grid-template-rows: masonry এখনও তার পরীক্ষামূলক পর্যায়ে রয়েছে, এটি ওয়েব লেআউট ক্ষমতার জন্য একটি উল্লেখযোগ্য অগ্রগতির প্রতিনিধিত্ব করে।

বিশ্বজুড়ে ডেভেলপারদের জন্য, মূল takeaway হলো ভবিষ্যতের কথা মাথায় রেখে নির্মাণ করা। প্রগ্রেসিভ এনহ্যান্সমেন্টকে আলিঙ্গন করে, আপনি আজই এই শক্তিশালী নতুন বৈশিষ্ট্যগুলো ব্যবহার শুরু করতে পারেন। আপনি অত্যাধুনিক ব্রাউজার ব্যবহারকারীদের জন্য একটি উচ্চ পারফরম্যান্ট, নেটিভ অভিজ্ঞতা প্রদান করতে পারেন এবং একটি সু-নির্মিত জাভাস্ক্রিপ্ট ফলব্যাকের মাধ্যমে বাকি সবার জন্য একটি শক্ত, কার্যকরী এবং দৃশ্যত অভিন্ন অভিজ্ঞতা নিশ্চিত করতে পারেন।

মৌলিক লেআউট প্যাটার্নের জন্য ভারী, থার্ড-পার্টি লাইব্রেরির উপর নির্ভর করার দিন শেষ হয়ে আসছে। সিএসএস গ্রিড, স্প্যানিং এবং নতুন masonry ভ্যালুর নীতিগুলো বোঝার মাধ্যমে, আপনি পরবর্তী প্রজন্মের সুন্দর, রেসপন্সিভ এবং পারফরম্যান্ট ওয়েব ইন্টারফেস তৈরি করার জন্য সুসজ্জিত।